<template>
  <el-card class="profile-info-card">
    <h3 class="card-title">待评价</h3>
    <div class="pending-review-container">
      <!-- 添加刷新按钮 -->
      <el-button
          type="primary"
          icon="el-icon-refresh"
          @click="refreshPendingReviews"
          style="margin-bottom: 20px"
      >
        刷新
      </el-button>
      <el-table
          :data="pendingReviewList"
          style="width: 100%"
          border
          stripe
      >
        <el-table-column
            prop="productImage"
            label="商品图片"
            align="center"
        >
          <template #default="scope">
            <img
                :src="scope.row.productImage"
                alt="商品图片"
                style="width: 50px; height: 50px; border-radius: 5px"
            />
          </template>
        </el-table-column>
        <el-table-column
            prop="productName"
            label="商品名称"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="commentContent"
            label="评论详情"
            align="center"
        ></el-table-column>
        <el-table-column
            label="操作"
            align="center"
        >
          <template #default="scope">
            <el-button
                type="text"
                @click="openReviewDialog(scope.$index)"
                style="color: #409eff"
            >
              评价
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
            small
            :hide-on-single-page="true"
            layout="prev, pager, next"
            @size-change="handlePendingReviewSizeChange"
            @current-change="handlePendingReviewCurrentChange"
            :current-page="pendingReviewPage.currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pendingReviewPage.pageSize"
            :total="pendingReviewPage.total"
            class="pagination"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
        :visible.sync="reviewDialogVisible"
        title="评价"
        class="review-dialog"
        center
    >
      <el-form :model="reviewForm" label-width="100px">
        <el-form-item label="评价内容">
          <el-input
              type="textarea"
              v-model="reviewForm.commentContent"
              placeholder="请输入评价内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="评分">
          <el-rate
              v-model="reviewForm.score"
              :max="5"
              :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
              show-text
              :texts="['很差', '较差', '一般', '较好', '很好']"
          ></el-rate>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="reviewDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitReview">提交</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import {mapGetters} from "vuex";
import {pagePendingComments, submitComment} from "@/api/pendingReviewApi";

export default {
  name: 'PendingReview',
  data() {
    return {
      pendingReviewList: [],
      reviewDialogVisible: false,
      reviewForm: {
        commentContent: '',
        score: 0,
      },
      reviewIndex: -1,
      pendingReviewPage: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      }
    };
  },
  computed: {
    ...mapGetters({
      getUser: 'user/getUser'
    })
  },
  methods: {
    fetchPendingReviews() {
      const params = {
        pageRequestDto: {
          page: this.pendingReviewPage.currentPage,
          size: this.pendingReviewPage.pageSize
        },
        users: this.getUser
      };
      pagePendingComments(params)
          .then(response => {
            this.pendingReviewList = response.data.records;
            this.pendingReviewPage.total = response.data.total;
          })
          .catch(error => {
            console.error('获取待评价列表失败:', error);
          });
    },
    openReviewDialog(index) {
      this.reviewDialogVisible = true;
      this.reviewIndex = index;
    },
    submitReview() {
      const reviewData = {
        commentContent: this.reviewForm.commentContent,
        rating: this.reviewForm.score,
        productId: this.pendingReviewList[this.reviewIndex].productId,
        users: this.getUser
      };
      submitComment(reviewData)
          .then(response => {
            this.$message.success('评价成功！');
            this.pendingReviewList[this.reviewIndex].commentContent = this.reviewForm.commentContent;
            this.pendingReviewList[this.reviewIndex].rating = this.reviewForm.score;
            this.reviewDialogVisible = false;
            this.reviewForm.commentContent = '';
            this.reviewForm.score = 0;
            this.fetchPendingReviews();
          })
          .catch(error => {
            this.$message.error('评价失败，请稍后再试！');
            console.error('提交评价失败:', error);
          });
    },
    handlePendingReviewSizeChange(newSize) {
      this.pendingReviewPage.pageSize = newSize;
      this.fetchPendingReviews();
    },
    handlePendingReviewCurrentChange(newPage) {
      this.pendingReviewPage.currentPage = newPage;
      this.fetchPendingReviews();
    },
    refreshPendingReviews() {
      // 重置分页信息并重新加载待评价列表
      this.pendingReviewPage.currentPage = 1;
      this.fetchPendingReviews();
      this.$message.success('待评价列表已刷新');
    }
  },
  mounted() {
    this.fetchPendingReviews();
  }
};
</script>

<style scoped>
.profile-info-card {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 24px;
  margin-bottom: 20px;
}

.pending-review-container {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 增大上下部分的间距 */
}

.el-table {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end; /* 将分页条置于右侧 */
  width: 100%;
}

.pagination {
  width: 200px; /* 缩短分页条的宽度 */
}

.el-button {
  margin-right: 10px;
}
</style>